<template>
  <div class="oneTaskChartComp">
    <div class="h100 oneTaskChartCompMain">
      <task-select
        :time="2"
        @changeoption="changeTask($event, 'taskId')"
        :default-task-id="queryParams.taskId ? queryParams.taskId : undefined"
        :query="{projectId:myActiveProjectId}"
        style="width:100%;"
      ></task-select>
      <!-- 升级车辆日期分布图 -->
      <upgrade-car-date-distribution :task-id="activeTaskId"></upgrade-car-date-distribution>
      <!-- 升级车辆时段分布及升级车辆变化趋势 -->
      <a-row :gutter="20">
        <a-col :md="12">
          <!-- 升级车辆时段分布 -->
          <upgrade-car-time-distribution></upgrade-car-time-distribution>
        </a-col>
        <a-col :md="12">
          <!-- 升级车辆变化趋势 -->
          <upgrade-car-change-trend></upgrade-car-change-trend>
        </a-col>
      </a-row>
      <!-- 升级车辆阶段分布及升级车辆失败原因 -->
      <a-row :gutter="20" style="margin-top:15px;">
        <a-col :md="12">
          <!-- 升级车辆阶段分布 -->
          <upgrade-car-stage-distribution></upgrade-car-stage-distribution>
        </a-col>
        <a-col :md="12">
          <!-- 升级车辆失败原因 -->
          <upgrade-car-failure-reason></upgrade-car-failure-reason>
        </a-col>
      </a-row>
    </div>
    <div class="oneTaskChartCompFooter">
      <a-button type="primary" @click="closeDrawer">{{ $t('back') }}</a-button>
    </div>
  </div>
</template>
<script>
import TaskSelect from '@/views/components/TaskSelect'
import UpgradeCarDateDistribution from './UpgradeCarDateDistribution.vue'
import UpgradeCarTimeDistribution from './UpgradeCarTimeDistribution.vue'
import UpgradeCarChangeTrend from './UpgradeCarChangeTrend.vue'
import UpgradeCarStageDistribution from './UpgradeCarStageDistribution.vue'
import UpgradeCarFailureReason from './UpgradeCarFailureReason.vue'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    TaskSelect,
    UpgradeCarDateDistribution,
    UpgradeCarTimeDistribution,
    UpgradeCarChangeTrend,
    UpgradeCarStageDistribution,
    UpgradeCarFailureReason
  },
  props: {
    activeTaskId: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['myActiveProjectId'])
  },
  watch: {
    activeTaskId: {
      handler (val) {
        this.getTaskDetail(val)
      },
      immediate: true
    }
  },
  data () {
    return {
      queryParams: {

      }
    }
  },
  methods: {
    ...mapMutations(['SET_rightDrawerOPen']),
    changeTask () {

    },
    // 获取某个任务详情统计
    getTaskDetail () {

    },
    closeDrawer () {
      this.SET_rightDrawerOPen(false)
    }
  }
}
</script>
<style lang="less" scoped>
.oneTaskChartComp {
  flex:1 0 0;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  .oneTaskChartCompMain {
    flex:1 0 0;
    border-bottom:1px solid @borderColor;
    border-top:1px solid @borderColor;
    overflow:auto;
    padding:15px 24px;
  }
  .oneTaskChartCompFooter {
    flex:none;
    padding:15px 24px 15px 24px
  }
}
</style>
